// src/views/excel/Import.tsx
import { Button, Table, Switch, Image } from 'antd'
import { useState } from 'react'
import * as XLSX from 'xlsx'

type ImportProps = {}
interface DataType {
 proid: string
 proname: string
 img1: string
 originprice: number
 discount: number
 sales: number
 stock: number
 category: string
 brand: string
 issale: number
 isrecommend: number
 isseckill: number
}
export const Import = (props: ImportProps) => {
 const [proList, setProList] = useState([])
 // 导入数据
 const importExcel = () => { 
     const file = (document.getElementById('fileRef') as HTMLInputElement).files![0]
     const reader = new FileReader()
     reader.readAsBinaryString(file!) // 转成 二进制格式
     reader.onload = function () {
         const workbook = XLSX.read(this.result, { type: 'binary' });
         const t = workbook.Sheets['list'] // 拿到表格数据
         console.log(t)
         const r: any = XLSX.utils.sheet_to_json(t) // 转换成json格式
         console.log(r)
         setProList(r)
         // 将r的数据上传至服务器
     }
 }

 return (
       <>
         <Button onClick={() => { // 触发文件选择器
             (document.getElementById('fileRef') as HTMLInputElement).click()
         }}>导入数据</Button>
         <input type="file" hidden id='fileRef' onChange={importExcel} />
         <Table dataSource={proList} rowKey="proid" scroll={{ y: document.body.offsetHeight - 330 }}>
             <Table.Column
                 title="序号"
                 render={(text, record, index) => { return <span>{index + 1}</span> }}
             ></Table.Column>
             <Table.Column
                 title="产品分类"
                 dataIndex="category"
             ></Table.Column>
             <Table.Column
                 title="产品品牌"
                 dataIndex="brand"
             ></Table.Column>
             <Table.Column
                 title="产品名称"
                 dataIndex="proname"
             ></Table.Column>
             <Table.Column
                 title="图片"
                 dataIndex="img1"
                 render={(text) => { return <Image src={text} height={80} /> }}
             ></Table.Column>
             <Table.Column
                 title="产品价格"
                 dataIndex="originprice"
                 sorter={(a: DataType, b: DataType) => a.originprice - b.originprice}
             ></Table.Column>
             <Table.Column
                 title="产品折扣"
                 dataIndex="discount"
                 sorter={(a: DataType, b: DataType) => a.discount - b.discount}
             ></Table.Column>
             <Table.Column
                 title="产品销量"
                 dataIndex="sales"
                 sorter={(a: DataType, b: DataType) => a.sales - b.sales}
             ></Table.Column>
             <Table.Column
                 title="产品库存"
                 dataIndex="stock"
                 sorter={(a: DataType, b: DataType) => a.stock - b.stock}
             ></Table.Column>
             <Table.Column
                 title="是否上架"
                 dataIndex="issale"
                 render={(text) => { return <Switch checked={text === 1} /> }}
             ></Table.Column>
             <Table.Column
                 title="是否推荐"
                 dataIndex="isrecommend"
                 render={(text) => { return <Switch checked={text === 1} /> }}
             ></Table.Column>
             <Table.Column
                 title="是否秒杀"
                 dataIndex="isseckill"
                 render={(text) => { return <Switch checked={text === 1} /> }}
             ></Table.Column>
         </Table>
     </>
         )
}